Надёжная загрузка ресурсов в React: Освоение предохранителей с помощью хуков

В современных веб-приложениях асинхронная загрузка ресурсов является обычной практикой. Будь то получение данных из API, загрузка изображений или импорт модулей, обработка потенциальных ошибок во время загрузки ресурсов имеет решающее значение для комфортного пользовательского опыта. Предохранители (Error Boundaries) в React предоставляют механизм для перехвата ошибок JavaScript в любом месте дочернего дерева компонентов, их логирования и отображения резервного интерфейса вместо падения всего приложения. В этой статье рассматривается, как эффективно использовать предохранители в сочетании с хуками React для управления ошибками загрузки ресурсов.

Что такое предохранители (Error Boundaries)

До React 16 необработанные ошибки JavaScript во время рендеринга компонента могли повредить внутреннее состояние React и вызывать загадочные ошибки при последующих рендерах. Предохранители решают эту проблему, действуя как блоки `catch` для ошибок, возникающих в их дочерних компонентах. Это компоненты React, которые реализуют один или оба из следующих методов жизненного цикла:

• static getDerivedStateFromError(error): Этот статический метод вызывается после того, как в дочернем компоненте произошла ошибка. Он получает ошибку в качестве аргумента и возвращает значение для обновления состояния компонента.
• componentDidCatch(error, info): Этот метод жизненного цикла вызывается после того, как в дочернем компоненте произошла ошибка. Он получает ошибку в качестве аргумента, а также объект с информацией о том, какой компонент вызвал ошибку. Вы можете использовать его для логирования информации об ошибке.

Важно отметить, что предохранители перехватывают ошибки только на этапе рендеринга, в методах жизненного цикла и в конструкторах всего дерева под ними. Они не перехватывают ошибки в:

• Обработчиках событий (подробнее об этом в следующем разделе)
• Асинхронном коде (например, колбэках setTimeout или requestAnimationFrame)
• Рендеринге на стороне сервера
• Ошибках, возникающих в самом предохранителе (а не в его дочерних компонентах)

Предохранители и хуки React: Мощная комбинация

Хотя для реализации предохранителей традиционно использовались классовые компоненты, хуки React предлагают более лаконичный и функциональный подход. Мы можем создать переиспользуемый хук useErrorBoundary, который инкапсулирует логику обработки ошибок и предоставляет удобный способ обернуть компоненты, которые могут вызывать ошибки при загрузке ресурсов.

Создание пользовательского хука useErrorBoundary

Вот пример хука useErrorBoundary:

            import { useState, useCallback } from 'react';

function useErrorBoundary() {
  const [error, setError] = useState(null);

  const resetError = useCallback(() => {
    setError(null);
  }, []);

  const captureError = useCallback((e) => {
    setError(e);
  }, []);

  const ErrorBoundary = useCallback(({ children, fallback }) => {
    if (error) {
      return fallback ? fallback : 
An error occurred: {error.message || String(error)}
;
    }
    return children;
  }, [error]);

  return { ErrorBoundary, captureError, error, resetError };
}

export default useErrorBoundary;

            

              
                Copy
              
            
          

Объяснение:

• useState: Мы используем useState для управления состоянием ошибки. Изначально ошибка устанавливается в null.
• useCallback: Мы используем useCallback для мемоизации функций resetError и captureError. Это хорошая практика для предотвращения ненужных перерендеров, если эти функции передаются в качестве пропсов.
• Компонент ErrorBoundary: Это функциональный компонент, созданный с помощью useCallback, который принимает children и необязательный пропс fallback. Если в состоянии есть ошибка, он рендерит либо предоставленный компонент fallback, либо сообщение об ошибке по умолчанию. В противном случае он рендерит дочерние элементы. Это и есть наш предохранитель. Массив зависимостей `[error]` гарантирует, что он будет перерендерен при изменении состояния `error`.
• Функция captureError: Эта функция используется для установки состояния ошибки. Вы будете вызывать ее внутри блока try...catch при загрузке ресурсов.
• Функция resetError: Эта функция очищает состояние ошибки, позволяя компоненту перерендерить своих дочерних элементов (потенциально повторив попытку загрузки ресурса).

Реализация загрузки ресурсов с обработкой ошибок

Теперь давайте посмотрим, как использовать этот хук для обработки ошибок загрузки ресурсов. Рассмотрим компонент, который получает данные пользователя из API:

            import React, { useState, useEffect } from 'react';
import useErrorBoundary from './useErrorBoundary';

function UserProfile({ userId }) {
  const [user, setUser] = useState(null);
  const { ErrorBoundary, captureError, error, resetError } = useErrorBoundary();

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch(`https://api.example.com/users/${userId}`);
        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`);
        }
        const data = await response.json();
        setUser(data);
      } catch (e) {
        captureError(e);
      }
    };

    fetchData();
  }, [userId, captureError]);

  if (error) {
    return (
      Failed to load user data. Retry